<template>
  <div v-show="chartOpen">
    <LineChart v-show="'linechart' == elementInfo.elementType" :className="elementInfo.elementCode" :elementData="chartData" />
    <Histogram v-show="'histogram' == elementInfo.elementType" :className="elementInfo.elementCode" :elementData="chartData" />
    <Pie v-show="'pie' == elementInfo.elementType" :className="elementInfo.elementCode" :elementData="chartData" />
    <Radarchart v-show="'radarchart' == elementInfo.elementType" :className="elementInfo.elementCode" :elementData="chartData" />
    <Scatterplot v-show="'scatterplot' == elementInfo.elementType" :className="elementInfo.elementCode" :elementData="chartData" />
  </div>
</template>
<script setup name="DatascreenElement">
import { getElementForEcharts } from "@/api/datascreen/element";
import Histogram from "@/views/echarts/Histogram.vue";
import LineChart from "@/views/echarts/LineChart.vue";
import Pie from "@/views/echarts/Pie.vue"
import Radarchart from "@/views/echarts/Radarchart.vue"
import Scatterplot from "@/views/echarts/Scatterplot.vue"
import { toRefs } from 'vue'

const elementInfo = ref({})
const chartData = ref(undefined)
const chartOpen = ref(false)

const props = defineProps({
  elementId: String,
})

const { elementId } = toRefs(props)

// 初始化
function init(){
  if(elementId.value){
    getElementForEcharts(elementId.value).then(resp => {
      let chart = {}
      chart.seriesName = resp.data.seriesName
      chart.yAxis = resp.data.yAxis
      chart.series = resp.data.series
      chart.element = resp.data.element
      chartData.value = chart
      elementInfo.value = resp.data.element
      chartOpen.value = true
    })
  }
}

init()
</script>